import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addPersonAction } from '../../redux/actions/person'

class Person extends Component {
  state = {}
  componentDidMount() {}

  render() {
    let { personData } = this.props
    console.log(this.props)
    return (
      <div>
        <input
          ref={(c) => (this.nameNode = c)}
          type="text"
          placeholder="姓名"
        />
        <input ref={(c) => (this.ageNode = c)} type="text" placeholder="年龄" />
        <button onClick={this.addPerson}>添加人员</button>
        <ul>
          {personData.map((v) => {
            return <li key={v.name}>{v.name}</li>
          })}
        </ul>
      </div>
    )
  }
  addPerson = () => {
    console.log(this.nameNode.value, this.ageNode.value)

    this.props.addPersonAction({
      name: this.nameNode.value,
      age: this.ageNode.value,
    })
  }
}

const mapStateToProps = (state) => ({ personData: state.person, state })

const mapDispatchToProps = {
  addPersonAction,
}

export default connect(mapStateToProps, mapDispatchToProps)(Person)
